//****请求的基准地址
axios.defaults.baseURL = 'https://apipc-xiaotuxian-front.itheima.net/';
// 1.委托 完成tab栏切换
const tabNav = document.querySelector('.tab-nav')
// 2.1 获取所有的tab-pane
const tabPanes = document.querySelectorAll('.tab-pane')
// console.log(tabPanes);
tabNav.addEventListener('click', function (e) {
    // console.log(e.target); // 点击的元素对象
    // console.dir(e.target); // 点击的元素对象
    // console.log(e.target.tagName); // 点击的元素对象 标签名大写的
    // 1.1 只有点击a才触发
    if (e.target.tagName === 'A') {
        // console.log('点击了a');
        // 1.3 获取active这个对象 先移除active这个类名
        document.querySelector(`.tab-nav .active`).classList.remove('active')
        // 1.2 给点击的这个对象添加active类名
        e.target.classList.add('active')
        // 2.控制显示谁 tab-pane
        // 2.2 通过dataset来得到自定义属性的值
        console.log(e.target.dataset.id)
        // 2.4 每次点击之前 都隐藏
        for (let i = 0; i < tabPanes.length; i++) {
            tabPanes[i].style.display = 'none'
        }
        // 2.3 让对应的大盒子显示 e.target.dataset.id充当索引
        tabPanes[e.target.dataset.id].style.display = 'block'
    }
})

// 3.点击提交功能
const form = document.querySelector('form')
const username1 = document.querySelector('[name="username"]')
const password1 = document.querySelector('[name="password"]')
const agree = document.querySelector('[name="agree"]') // 复选框 checked
// console.log(password);
//**** 获取数据
let account = username1.value
let password = password1.value
// 3.1
form.addEventListener('submit', function (e) {
    // 3.2 阻止默认提交                      
    e.preventDefault()
    // console.log(agree.checked)
    // 3.3 没有勾选
    if (!agree.checked) {
        return alert('请勾选用户协议')
    }
    // console.log(serialize(form, {hash:true}));
    // ****进行请求的发送
    axios({
        method: 'post',
        url: '/login',
        data: {
            account,
            password
        }
    }).then(res => {
        // console.log(res);
        // 本地信息存储用户信息以及token标识
        localStorage.setItem('token',res.data.result.token)
        localStorage.setItem('uname', res.data.result.account)
        //跳转页面
        location.assign('./index.html')
        //弹窗提示
        alert(res.data.msg)
    }).catch(err => {
        console.log(err);
    })
    // 3.4 // 把用户名存储本地
    // localStorage.setItem('username', username.value)
    // 3.5 跳转页面 index
    // location.href ='./index.html'
    // location.assign('./index.html')
})